<template>
  <vxe-modal
    v-model="dialogFormVisible"
    title="用户迁移"
    show-footer
    transfer
    width="600"
    height="180"
    destroy-on-close
    :loading="listLoading"
    @close="close"
  >
    <template #default>
      <vxe-form
        ref="formRef"
        :data="form"
        :rules="rules"
        title-align="right"
        title-width="130"
      >
        <vxe-form-item title="处室/部门" field="orgId" span="24">
          <template #default>
            <el-tree-select
              ref="orgRef"
              v-model="form.orgId"
              :data="orgTree"
              node-key="id"
              :props="{
                value: 'id',
                label: 'name',
                children: 'children',
              }"
              :default-expanded-keys="[form.orgId]"
              :render-after-expand="false"
              :current-node-key="form.orgId"
              check-strictly
              highlight-current
              style="width: 320px"
            />
          </template>
        </vxe-form-item>
      </vxe-form>
    </template>
    <template #footer>
      <el-button type="primary" @click="save">
        <i class="icon-wpkj-save"></i>
        确定
      </el-button>
      <el-button @click="close()">取消</el-button>
    </template>
  </vxe-modal>
</template>

<script>
  import { getUserMobility } from '@/api/system/user/index'
  import { getDeptPage } from '@/api/system/dept/index'

  export default defineComponent({
    name: 'UserMove',
    emits: ['fetch-data'],
    setup(props, { emit }) {
      const $baseMessage = inject('$baseMessage')
      const $baseConfirm = inject('$baseConfirm')
      const $XEUtils = inject('$XEUtils')

      const state = reactive({
        orgRef: null,
        formRef: null,
        form: {
          orgId: '', // 单位代码
          unitId: undefined,
        },
        userList: [],
        rules: {
          orgId: [
            { required: true, trigger: 'blur', message: '请输入处室/部门' },
          ],
        },
        orgTree: [],
        dialogFormVisible: false,
        listLoading: false,
      })

      const showEdit = (rows) => {
        state.listLoading = true
        state.userList = rows
        getDeptPage({})
          .then((response) => {
            if (response.code === 0 || response.code === 200) {
              const { data } = response
              state.orgTree = $XEUtils.toArrayTree(data, {
                key: 'id',
                parentKey: 'parentId',
              })
            }
            state.listLoading = false
          })
          .catch((err) => {
            state.listLoading = false
          })
        state.dialogFormVisible = true
      }

      const save = async () => {
        const validate = await state['formRef']
          .validate()
          .catch((validate) => validate)
        if (!validate) {
          if (state.userList.length > 0) {
            $baseConfirm('确要迁移选定的用户吗？', null, async () => {
              const orgData = state['orgRef'].getCurrentNode()
              state.listLoading = true
              getUserMobility(orgData.id, state.userList)
                .then((response) => {
                  if (response.code === 0 || response.code === 200) {
                    emit('fetch-data', response.data)
                    close()
                    $baseMessage(
                      response.msg,
                      'success',
                      'vab-hey-message-success'
                    )
                  } else {
                    $baseMessage(
                      response.msg,
                      'error',
                      'vab-hey-message-success'
                    )
                  }
                })
                .catch(() => {
                  state.listLoading = false
                })
            })
          } else {
            this.$baseMessage('请先选择行！', 'error')
            return
          }
        }
      }

      const close = () => {
        state.form = {
          orgId: '', // 单位代码
          unitId: undefined,
        }
        state.userList = []
        state.dialogFormVisible = false
        state['formRef'].reset()
      }

      return {
        ...toRefs(state),
        showEdit,
        close,
        save,
      }
    },
  })
</script>
